<template>
	<view class="detail-container">
		<!-- 基本信息卡片 -->
		<view class="info-card">
			<view class="card-title">通知信息</view>
			<view class="info-list">
				<view class="info-item">
					<text class="label">主题</text>
					<text class="value">{{ notification.subject || '-' }}</text>
				</view>
				<view class="info-item">
					<text class="label">类型</text>
					<text class="value">{{ formatType(notification.type) || '-' }}</text>
				</view>
				<view class="info-item">
					<text class="label">信息</text>
					<text class="value">{{ notification.text || '-' }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				notification: {},
				typeMap: {
					'ALARM': '告警',
					'ALARM_ASSIGNMENT': '告警分配',
					'ALARM_COMMENT': '告警评论',
					'API_USAGE_LIMIT': 'API使用限制',
					'DEVICE_ACTIVITY': '设备活动',
					'EDGE_COMMUNICATION_FAILURE': '边缘通信失败',
					'EDGE_CONNECTION': '边缘连接',
					'ENTITIES_LIMIT': '实体限制',
					'ENTITY_ACTION': '实体操作',
					'GENERAL': '通用',
					'PLATFORM_VERSION': '平台版本',
					'RATE_LIMITS': '速率限制',
					'RULE_ENGINE_COMPONENT_LIFECYCLE_EVENT': '规则引擎组件生命周期事件',
					'RULE_NODE': '规则节点',
					'TASK_PROCESSING_FAILURE': '任务处理失败'
				}
			}
		},
		onLoad() {
			// 获取上一页传递的数据
			const eventChannel = this.getOpenerEventChannel()
			eventChannel.on('notificationData', (data) => {
				this.notification = data.data
			})
		},
		methods: {
			formatType(type) {
				return this.typeMap[type] || type
			}
		}
	}
</script>

<style>
.detail-container {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding: 20rpx;
}

.info-card {
	background-color: #fff;
	border-radius: 12rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
}

.card-title {
	font-size: 32rpx;
	color: #333;
	font-weight: 600;
	margin-bottom: 30rpx;
}

.info-list {
	display: flex;
	flex-direction: column;
	gap: 24rpx;
}

.info-item {
	display: flex;
	flex-direction: column;
	gap: 12rpx;
}

.label {
	font-size: 28rpx;
	color: #999;
}

.value {
	font-size: 28rpx;
	color: #333;
	word-break: break-all;
}
</style>
